<template>
  <div
    style="
      position: fixed;
      height: 60px;
      width: 100%;
      z-index: 1000;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
    "
    class="header"
  >
    <div>
      <img
        src="@/assets/petLogo.png"
        style="width: 40px; height: 40px; margin-top: 7px; margin-left: 20px"
      />
    </div>
    <div
      style="
        width: 70px;
        color: dodgerblue;
        margin-top: 5px;
        text-align: left;
        margin-left: 3px;
      "
    >
      萌宠简坛
    </div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      style="margin-left: 80px"
    >
      <!-- 这里是菜单项 -->
      <el-menu-item index="/user/home" @click="$router.push('/user/home')"
        >首页</el-menu-item
      >
      <el-menu-item index="/user/search" @click="handleSearch"
        >搜索</el-menu-item
      >
      <el-menu-item index="/user/hot" @click="$router.push('/user/hot')"
        >热榜</el-menu-item
      >
      <el-menu-item index="/user/postTag" @click="$router.push('/user/postTag')"
        >标签</el-menu-item
      >
      <el-menu-item index="/user/science" @click="$router.push('/user/science')"
        >百科</el-menu-item
      >
      <el-menu-item
        index="/user/socialCircle"
        @click="$router.push('/user/socialCircle')"
        >圈子</el-menu-item
      >
    </el-menu>
    <div style="flex: 1"></div>
    <div style="margin-top: 5px; margin-right: 10px">
      <el-input
        style="width: 260px; margin-right: 10px; margin-top: 10px"
        placeholder="请输入关键字搜索"
        v-model="searchValue"
      ></el-input>
      <el-button icon="el-icon-search" type="primary" @click="handleSearch"
        >搜索</el-button
      >
      <!-- 消息通知 -->
      <span style="margin-left: 10px; margin-right: 5px; position: relative">
        <el-button
          type="info"
          icon="el-icon-message"
          style="background-color: #1890ff"
          circle
          @click="handleMessage()"
        />
        <!-- 小红点 -->
        <div class="dot" v-if="this.count > 0"></div>
      </span>
    </div>
    <div
      style="width: 200px text-align: right;margin-right: 30px;cursor: pointer;"
    >
      <el-dropdown>
        <div
          class="el-dropdown-link"
          style="font-size: 18px; color: #1890ff; display: flex"
        >
          <div style="flex: 3">
            <div style="margin-top: 22px">{{ user.realName }},您好</div>
          </div>
          <div style="flex: 1">
            <el-avatar class="avatar" :size="43" style="margin-top: 10px">
              <img :src="user.avatar" alt="avatar" />
            </el-avatar>
          </div>
          <div>
            <div style="margin-top: 22px">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </div>
        </div>
        <template #dropdown>
          <el-dropdown-menu style="color: #1890ff">
            <el-dropdown-item @click="$router.push('/user/person')"
              ><h3>个人信息</h3></el-dropdown-item
            >
            <el-dropdown-item @click="dialogVisible = true"
              ><h3>重置密码</h3></el-dropdown-item
            >
            <el-dropdown-item @click="$router.push('/user/postExamManage')" v-if="showPostExam"
              ><h3>帖子审核</h3></el-dropdown-item
            >
            <el-dropdown-item @click="$router.push('/login')"
              ><h3>退出系统</h3></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <!-- 修改密码对话框 -->
  <div>
    <el-dialog v-model="dialogVisible" :width="1000">
      <template #title="{  titleId,titleClass }" >
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass" style="width: 100%;text-align: center;font-size: large;">重置密码</h4>
      </div>
      </template>
      <div style="width: 100%;height: 100%;overflow-y: auto;overflow-x: hidden;">
        <div style="width: 500px;margin: 0 auto; margin-top: 120px;">
        <el-form ref="form" :model="form" :rules="rules" size="20" >
          <el-form-item label="原&nbsp&nbsp&nbsp密&nbsp&nbsp&nbsp&nbsp码" prop="oldPassword" style="margin-top: 20px;">
            <el-input v-model="form.oldPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新&nbsp&nbsp&nbsp密&nbsp&nbsp&nbsp&nbsp码" prop="newPassword">
            <el-input v-model="form.newPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPass">
            <el-input v-model="form.confirmPass" show-password></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="changePsss"> 确认 </el-button>
        </div>
      </div>
    </el-dialog>
    
  </div>
  <!-- 消息通知对话框 -->
  <div>
    <el-dialog v-model="dialogForNotify"   :show-close="true"   :width="1000">
      <template #title="{  titleId,titleClass }" >
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass" style="width: 100%;text-align: center;font-size: large;">消息通知</h4>
      </div>
      </template>
      <div style="width: 100%;height: 100%;overflow-y: auto;overflow-x: hidden">
        <div style="width: 100%;height: 70px;border-bottom: #1890ff solid 1px; margin-top: 10px;display: flex;padding-top: 8px;padding-left: 8px;padding-right: 8px;" v-for="notify in notifys" :key="notify.id">
          <img src="https://www.jiuyeqiao.cn/app/static/web/message/img/meeting.png" width="60px" height="60px" style="border-radius: 50%;">
          <div style="flex: 1;padding: 2px">
            <div style="font-size: 17px;font-weight: 700;width: 100%;text-align: left;">通知</div>
            <div style="font-size: 16px;font-weight: 700;width: 100%;text-align: left;margin-top: 5px;">你好，同学，{{ notify.content }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "userHeader",
  props: ["user"],
  data() {
    return {
      searchValue: "", // 用于存储搜索框的值
      dialogVisible: false, //修改密码对话框状态
      dialogForNotify: false, //消息通知对话框
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPass: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        confirmPass: [
          { required: true, message: "请输入确认新密码", trigger: "blur" },
        ],
      },
      count: 0,
      notifys:[],
      user1: JSON.parse(sessionStorage.getItem("user"))||{},
      showPostExam:false,
    };
  },
  created() {
    this.getCount();
    this.user1.permissions.forEach((p) => {
      if (p.path === "/postExamManage") {
        this.showPostExam=true;
      }
    });
  },
  methods: {
    handleSearch() {
      // 在这里跳转到目标页面，并携带搜索框的值作为参数
      this.$router.push({
        name: "UserSearch",
        query: { searchValue: this.searchValue },
      });
    },
    //获取消息通知条数接口
    getCount() {
      request.get("/notify/getCount").then((res) => {
        this.count = res.data;
      });
    },
    //获取消息
    getNotifys(){
      request.get("/notify/list").then((res) => {
        this.notifys = res.data;
      });
    },
    changePsss() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.newPassword !== this.form.confirmPass) {
            console.log("hhhhhhhh");
            this.$message.error("2次输入新密码必须一致");
            return;
          }
          request.post("/userinfo/password", this.form).then((res) => {
            if (res.code === 0) {
              this.$message.success("修改成功");
              this.$router.push("/login");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleMessage(){
      this.dialogForNotify=true
      this.getNotifys();
    }
  },
};
</script>

<style scoped>
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dot {
  position: absolute;
  top: -6px;
  right: 1px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;

}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
:deep(.el-dialog__header){
  background-color: #409EFF;
  padding: 20px;
}
:deep(.el-dialog__body){
  padding: 0px;
  height: 480px;
}

</style>
